<template>
  <div class="container mb-32 px-4">
    <Breadcrumbs title="All boxes" />
    <div class="sm:flex w-auto">
      <div class="flex">
        <select
          class="block pl-3 pr-10 py-2 bg-gray-dark outline-none text-xs sm:text-sm rounded-md border-none sm:mr-5 w-full sm:w-[160px] sm:mt-0"
          name="type"
          @change="changeCate"
        >
          <option
            v-for="(item, index) in boxCate"
            :key="item.id"
            :value="item.id"
          >
            {{ item.name }}
          </option>
        </select>
      </div>
      <div class="relative rounded-md bg-gray-dark mt-3 sm:mt-0">
        <div
          class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"
        >
          <div class="h-5 w-5 text-black-70">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fill-rule="evenodd"
                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                clip-rule="evenodd"
              ></path>
            </svg>
          </div>
        </div>
        <input
          v-model="keywords"
          type="text"
          name="search-box"
          id="search-box"
          class="block w-full sm:w-[220px] pl-10 text-xs sm:text-sm rounded-md border-none h-8 sm:h-[50px] bg-gray-dark"
          placeholder="搜索想要的盒子..."
        />
      </div>
    </div>
    <ProductList :boxsList="searchList" />
  </div>
</template>

<script>
// import Swiper from "@/components/swiper/index.vue"
import ProductList from "./components/productList.vue";
import Breadcrumbs from "@/components/Breadcrumbs/index.vue";
export default {
  components: { ProductList, Breadcrumbs },
  created() {
    this.$api.getBoxCate().then((res) => {
      this.boxCate = res.data.data;
    });
    this.getBoxsList();
  },
  data() {
    return {
      boxCate: [],
      boxsList: [],
      cate: 0,
      keywords: "",
    };
  },
  methods: {
    getBoxsList() {
      this.$api
        .getBoxs({
          cate_id: this.cate,
        })
        .then((res) => {
          this.boxsList = res.data.data.box;
        });
    },
    changeCate(e) {
      this.cate = e.target.value;
      this.getBoxsList();
    },
  },
  computed: {
    searchList() {
      return this.boxsList.filter((item) => {
        return item.box_name.includes(this.keywords);
      });
    },
  },
};
</script>

<style></style>
